<template>
    <div class="appmain">
        <div class="gobastyle">
          <span><i @click="goback"  class="iconfont icon-fanhui"></i></span>
        </div>
        <div class="main-child">
          <div class="txun">本层资产</div>
          <div class="commonstr str1 addtop">
              <div class="next-title"><span>·&nbsp;本层资产价值</span><span class="title-number"><span style="color:#16cdff">68.74</span>&nbsp;亿元</span></div>
              <div class="detail">
                  <div ref="main" style="width:100%;height:100%;"></div>
              </div>
          </div>
          <div class="txun">本层新增资产价值环比</div>
          <div class="commonstr str1 addtop" style="height:40%">
              <!-- <div class="next-title"><span>·&nbsp;总资产价值</span><span class="title-number"><span style="color:#16cdff">20.6874</span>&nbsp;亿元</span></div> -->
              <div class="detail" style="height:100%">
                  <div ref="maintwo" style="width:100%;height:100%;"></div>
              </div>
          </div>
          <floorChange style="top:20%"></floorChange>
       </div>
    </div>
</template>

<script>
var echarts = require("echarts");
import { debounce } from "../../../utils"
import floorChange from '../child/floorChange'
export default {
  name: "energy",
  data() {
    return {
      chart: null,
      charttwo: null,
      startCharts: null
    };
  },
  components: {
    floorChange
  },
  mounted() {
    this.initChartone();
    this.initChart();
    // 宽度变化，echarts自适应--暂无效果：echarts宽度固定
    this.__resizeHanlder = debounce(() => {
      if (this.chart) {
        this.chart.resize()
        this.charttwo.resize()
      }
    }, 100)
    window.addEventListener('resize', this.__resizeHanlder)
  },
  beforeDestroy () {
    // 若 chart 存在，则取消绑定事件
    if (!this.chart) {
      return
    }
    window.removeEventListener('resize', this.__resizeHanlder)
    this.chart.dispose()
    this.chart = null
    this.charttwo.dispose()
    this.charttwo = null
    clearInterval(this.startCharts)
  },
  methods: {
     // 返回按钮
    goback(){
      viewBackFromFloorToBudling();
      this.$router.push({path: '/home/property'});
    },
    // eachart
    initChartone() {
      let isSet = true
      let _this = this
      this.chart = echarts.init(this.$refs.main);
      this.chart.on('mouseover', function (param) {
        clearInterval(_this.startCharts)
        // 取消之前高亮的图形
        _this.chart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: app.currentIndex
        });
        // 高亮当前图形
        _this.chart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: param.dataIndex
        });
        // 显示 tooltip
        _this.chart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: param.dataIndex
        });
        isSet = false
      })
      this.chart.on('mouseout', function (param) {
        if (!isSet) {
          _this.startCharts = setInterval(chartHover, 2000);
          isSet = true
        }
      })
      var option = {
        color: ["#8370fe", "#ffa729", "#00a0ea", "#43c561"],
        tooltip: {
          formatter: "{a}<br>{b}: {c} ({d}%)",
          fontSize: "13",
        },
        legend: {
          data: ['基础设施', '电梯', '', '机电设备', '其他'],
          icon: 'rect',
          selectedMode:false,
          right: '30px',
          top: 'center',
          itemWidth: 14,
          itemHeight: 14,
          textStyle: {
            color: '#fff'
          }
        },
        series: [
          {
            name: '本层资产价值',
            type: "pie",
            radius: ["50%", "70%"],
            center: ["25%", "50%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "13",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              { value: 335, name: "基础设施" },
              { value: 310, name: "电梯" },
              { value: 234, name: "机电设备" },
              { value: 135, name: "其他" }
            ]
          }
        ]
      };
      //设置series
      this.chart.setOption(option);
      app.currentIndex = -1;

      var chartHover = function(){
        var dataLen = option.series[0].data.length;
        // 取消之前高亮的图形
        _this.chart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: app.currentIndex
        });
        app.currentIndex = (app.currentIndex + 1) % dataLen;
        // 高亮当前图形
        _this.chart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: app.currentIndex
        });
        // 显示 tooltip
        _this.chart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: app.currentIndex
        });
      }
      // console.log(isSet)
      this.startCharts = setInterval(chartHover, 2000);
    },
    initChart() {
      this.charttwo = echarts.init(this.$refs.maintwo);
      var option = {
          color: [ "#999","#ffa729", "#00a0ea", "#43c561","#8370fe"],
          tooltip : {
            trigger: 'axis',
            axisPointer : {
              type : 'shadow',
              shadowStyle: {
                width: 20,
                color: 'rgba(150,150,150,0.3)'
              }
            },
            formatter: function(params) {
              let text = [];
              params.forEach((item, index) => {
                // console.log(item)
                if (item.value != 0) {
                  text += `<span style="display:inline-block;width:6px;height:6px;margin:0px 5px 2px 5px;border-radius:50%;background:${item.color}"></span>${item.seriesName}: ${item.value}万元<br>`;
                }
              });
              return text;
            }
          },
          legend: {
            data:['基础设施','机电设备','电梯','其他'],
            x: "center",
            bottom: "10px",
            selectedMode:false,
            icon: "rect",
            itemWidth: 14,
            itemHeight: 14,
            textStyle: {
              color: '#fff'
            }
          },
          grid: {
            top:'10%',
            left: '10%',
            right: '10%',
            bottom: '15%',
            containLabel: true
          },
          xAxis : [
            {
              type : 'category',
              data : ['2015','2016','2017','2018'],
              axisTick: { show: false },
              axisLabel: {
                textStyle: {
                  color: "#999"
                }
              },
            }
          ],
          yAxis : [
            {
              type : 'value',
              axisTick: { show: false },
              axisLabel: { show: false },
              splitLine: { show: false }
            }
          ],
          series : [
              {
                  name:'总计',
                  type:'line',
                  data:[42, 32, 40, 29]
              },
              {
                  name:'基础设施',
                  type:'bar',
                  barWidth: 20,
                  stack: '广告',
                  data:[14, 0, 10, 6]
              },
              {
                  name:'机电设备',
                  type:'bar',
                  stack: '广告',
                  data:[0, 18, 14, 23]
              },
              {
                  name:'电梯',
                  type:'bar',
                  stack: '广告',
                  data:[20, 14, 10, 0]
              },
              {
                  name:'其他',
                  type:'bar',
                  stack: '广告',
                  data:[8, 0, 6, 0]
              }
          ]
      };
      //设置series
      this.charttwo.setOption(option);
    }
  }
};
</script>

<style lang="scss" scoped>
$colorwhite: white;
$colorblue: #16cdff;
$bordercolor: #172231;
$borderbottom: #10325d;
$iconcolor: #ff6661;
$iconcolor1: #8370fe;
$iconcolor2: #00a0ea;
$iconcolor3: #8370fd;
$iconcolor4: #15cdff;
$fontcolor1: #00a0ea;
$fontcolor2: #ffa628;
$fontcolor3: #6859be;
$fontcolor4: #2dd2ff;
$fontcolor5: #ff7670;
$fontcolor6: #f9f41f;
$fontcolor7: #00ff01;
$fontcolor8: #016bfb;
$mrtop: 8px;
.appmain {
  height: 100%;
  // margin-top: 20px;
  width: 27%;
  min-width: 497px;
  box-sizing: border-box;
  position: absolute;
  right: 20px;
  .gobastyle{
    width: 40px;
    height: 40px;
    // background-color: salmon;
    position: absolute;
    right: 11%;
    top: 50px;
    .icon-fanhui{
      font-size: 0.30rem;
      color: white;
      position: absolute;
      z-index: 1;
      cursor: pointer;
    }
  }
  .mainicon{
    position: absolute;
    top:-40px;
    right: 0;
    color: #ddd;
    span{
      width: 40px;
      .iconfont{font-size: 24px;}
    }
  }
  .addstyle{
    top: -67px;
    // right: 55px;
    right: 13%;
  }
  .main-child {
    height: 70%;
    width: 100%;
    position: absolute;
    top: 20%;
    padding: 15px;
    .addtop {
      margin-top: $mrtop;
    }
    // 公用样式
    .txun {
       height: 40px;
      line-height: 40px;
      width: 100%;
      padding-left:25px;
      background: url("../../../assets/img/titlebj.png") no-repeat;
      background-size:100% 100%;
      color: $colorwhite;
      font-size: 0.15rem;
    }
    .commonstr {
      width: 94%;
      margin-left: 3%;
      font-size: 0.15rem;
      color: white;
      background: rgba($color: #000000, $alpha: 0.5);
      margin-top: $mrtop;
      border: 1px solid $bordercolor;
      box-shadow: 0px 0px 7px 3px rgba(22, 64, 117, 0.8) inset;
    }
    .next-title {
      width: 100%;
      border-bottom: 2px solid $borderbottom;
      padding: 8px;
      .title-number {
        float: right;
      }
    }
    .str1 {
      height: 35%;
      .detail {
        margin: 0;
        font-size: 0;
        height: 82%;
        width: 100%;
      }
    }
  }
}
</style>